import { Col, Form, Row } from 'antd';
import { isArray } from 'lodash';
import styles from './index.less';
/**
 *
 * @param  title 标题名称
 * @param  deleteFunc 删除函数
 * @param  form 表单
 * @param  isForm 是否是表单
 * @param  children 子组件
 * @returns
 */
const EditForm = ({
  form = {},
  isForm = true,
  children,
  oneColumn = false,
  oneColumnSpan = 24,
  columnSpan = 10,
  ...rest
}: any) => {
  const FormItems = () => {
    return (
      <>
        {/* <Row gutter={24}>
          {!oneColumn &&
            children &&
            isArray(children) &&
            children.map((item: any, index: number) => {
              if ((index + 1) % 2 === 0) {
                // 偶数情况下，即2、4、6、8等，一般为每一行的第二个
                return (
                  <Col
                    key={index}
                    span={columnSpan}
                    style={{ marginLeft: '40px' }}
                  >
                    {item}
                  </Col>
                );
              } else {
                // 奇数情况下，即1、3、5、7等，一般为每一行的第一个
                return (
                  <Col key={index} span={columnSpan}>
                    {item}
                  </Col>
                );
              }
            })}
        </Row> */}
        <div className="grid grid-cols-2 gap-x-[40px] w-full">
          {!oneColumn &&
            children &&
            isArray(children) &&
            children.map((item: any, index: number) => {
              return (
                <div
                  key={index}
                  className={styles.formItem}
                  // style={{ marginLeft: '40px' }}
                >
                  {item}
                </div>
              );
            })}
        </div>
        {!oneColumn && children && !isArray(children) && <Row>{children}</Row>}
        {oneColumn &&
          children &&
          isArray(children) &&
          children.map((item: any, index: number) => {
            // 偶数情况下，即2、4、6、8等，一般为每一行的第二个
            return (
              <Row key={index}>
                <Col span={oneColumnSpan}>{item}</Col>
              </Row>
            );
          })}
      </>
    );
  };
  return (
    <div>
      {isForm ? (
        <Form
          className={styles.formStyle}
          colon={false}
          labelAlign="left"
          labelCol={{
            sm: 9,
            xl: 7,
          }}
          wrapperCol={{
            sm: 15,
            xl: 17,
          }}
          // layout="vertical"
          form={form}
          labelWrap
          {...rest}
        >
          <FormItems />
        </Form>
      ) : (
        <FormItems />
      )}
    </div>
  );
};

export default EditForm;
